<template lang="html">
  <div class="demo">
    <div ref="bar" id="bar2"></div>
    <p class="blue">123</p>
    <p class="blue" ref="text"></p>
    <p class="blue" v-html="title"></p>
    <br>
    <div id="box"></div>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  data() {
    return {
      title: ''
    }
  },
  methods: {
    // 柱状图
    init () {
      let data = [4, 8, 15, 16, 24, 43]
      let bar2 = d3.select('#bar2')
        .selectAll('div')
        .data(data)
        .enter()
        .append('div')
        .style('height', (d) => d + 'px')
        .style('background', '#A5E9DB')
        .style('display', 'inline-block')
        .style('width', '20px')
        .style('margin-right', '3px')

      let text = this.$refs.text
      this.title = text.innerHTML = '测试<span>哈哈</span>'
    },
    // 方块图
    init2 () {
      const colorMap = d3.interpolateRgb(
        d3.rgb('#d6e685'),
        d3.rgb('#1e6823')
      )
      let data = [.2, .4, 0, 0.1, .13, .92]

      d3.select('#box')
        .selectAll('div')
        .data(data)
        .enter()
        .append('div')
        .style('background-color', (d) => {
          return d == 0 ? '#eee' : colorMap(d)
        })
        .style('width', '20px')
        .style('height', '20px')
        .style('margin-right', '3px')
        .style('display', 'inline-block')
    }
  },
  mounted () {
    this.init()
    this.init2()
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../assets/scss/default";
  #bar2 div {
    display: inline-block;
    background: $blue;
    width: 20px;
    margin-right: 3px;
  }
  .blue {
    color: $blue;
    span {
      color: $red;
    }
  }
</style>
